<template>
	<view class="page">
		<view class="flex flex_row_between order_number twelve_font">
			<text style="font-size: 24rpx;">订单编号：{{item.order_sn}}</text>
			<!-- <text class="red_font" v-if="item.is_prior_payment == 0 && item.order_status==0">货到付款</text> -->
			<text :class="item.order_status==4? 'gray_font':item.order_status==0?'red_font':'dgreen'">{{stateList[item.order_status].name}}</text>
		</view>
		<view class="flex flex_row_center">
			<view style="flex-basis: 100%">
			<view class="flex-middle">
				<view class="imgs flex-middle">
					<image class="img" :src="item.img" mode="aspectFit" ></image>
					<!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
				</view>
				<view class="order_info fourteen">
				<view class="flex flex_row_between">
					<view class="">{{item.goods_name}} <text v-if="item.sum_order_num>1" style="margin-left:10rpx;">等商品</text> </view>
					<view style="color: #adaeaf">
						<text> 共 {{item.sum_order_num}} 件</text>
						<u-icon name="arrow-right" color="gray" size="18" ></u-icon>
					</view>
				</view>
				<view> 下单时间：{{item.createdTime}}</view>
				<view> 配送日期：{{item.send_time}} </view>
				<view v-if="item.order_status==0 && item.is_prior_payment == 1">
					支付时间：
					<u-count-down @end="timeEnd" :timestamp="times"  font-size="28" color="#fff" bg-color="#000"></u-count-down>
				</view>
				</view>
			</view>
			<view class="total">
				<view style="color:gray">
					配送金额:<text class="">￥{{Number(item.send_money).toFixed(2)}}</text> 
				</view>
				<view>
					实付金额:<text class="red_font fonts_26">￥{{Number(item.real_money).toFixed(2)}}</text> 
				</view>
					
				<!-- </view> -->
			</view>

			<view class="select_button text_right">
				<text class="cancel_order" v-show="item.order_status==0" @click.stop="clickbtn('cancelOrder',item.id,'取消订单')">取消订单</text>
				<text class="confirm_pay" v-show="item.order_status==0 && item.is_prior_payment == 1&&!timeend" @click.stop="clickbtn('toPay',item.id,)">立即支付</text>
				<text class="check_log" v-show="item.order_status==2" @click.stop="clickbtn('getLogistics',item.id,'查看物流')">查看物流</text>
				<text class="return_good" v-show="item.order_status==2" @click.stop="clickbtn('getOrderDetail',item.id,'申请退货')">申请退货</text>
				<text class="confirm_good" v-show="item.order_status==2" @click.stop="clickbtn('confirmOrder',item.id,'确认收货')">确认收货</text>
				<text class="another_order" v-show="item.order_status==3 || item.order_status == 4" @click.stop="clickbtn('onceAgain',item.id,'再来一单')">再来一单</text>
			</view>
			</view>
			<!-- <text class="success_pay">支付成功</text> -->
		</view>
	</view>
</template>

<script>
	export default {
		props:['item'],
		data() {
			return {
				logo:'',
				showLogo:0,
				times:null,
				timeend:false,	//时间是否到了
				stateList: [
					{name: "待审核",},
					{name: "备货中",},
					{name: "配送中",},
					{name: "已完成",},
					{name: "已取消",},
				],
			};
		},
		mounted(){
			this.logo = uni.getStorageSync('logo');
			this.showLogo = uni.getStorageSync('showLogo');
			this.times = (1800 + Number(this.item.created_at))  - new Date().getTime()/1000;
			if(this.times<=0){
				this.timeend = true;
			}
		},
		methods:{
			clickbtn(type,id,msg){
				this.$emit('clickbtn',{type,id,msg})
			},
			timeEnd(){
				this.timeend = true;
				this.$emit('getData',1)
			}
		},
	}
</script>

<style lang="scss" scoped>
.page{
	font-size: 26rpx;
	.imgs{
		width:120rpx;
		height:120rpx;
		position: relative;
		.logo{
			width:40rpx;
			height:40rpx;
			position: absolute;
			top: 0;
			left:0;
			z-index: 1;
		}
		.img{
			width:112rpx;
			height:80rpx;
			margin-right:22rpx;
		}
	}
    .order_number {
      height: 64rpx;
      line-height: 64rpx;

      border-bottom: 1px solid #ececec;
    }

    .order_info {
      flex-basis: 100%;
	  >view{
		  margin:10rpx 0;
	  }
    }

  .sign_order:nth-child(n + 2) {
    margin-top: 20rpx;
  }


  .select_button {
    padding: 26rpx 0;

    .another_order,
    .confirm_pay {
      border-color: $dgreen;
      color: $dgreen;
    }

    .look_logist,
    .cancel_order {
      color: #8f8f8f;
    }

    .confirm_good {
      color: #e53131;
    }
	.return_good{
		color: #FD5E2E;
	}
  }

  .select_button > text {
    border: 1px solid;
    padding: 8rpx 22rpx;
    margin-left: 24rpx;
    font-size: 24rpx;
    border-radius: 24rpx;
  }
.top_title{
	.user-icon{
		height: 30rpx;
	}
	.account{
		margin-left:10rpx;
	}
}

}
.total{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	view{
		margin-left:10rpx;
		&:not(:last-of-type){
			font-size: 24rpx;
		}
	}
}
</style>
